<template>
	<div class="war">
		<div class="area-center">
			<head-page :title="list.institueTitle" id="back"></head-page>
		<!-- 国内总区域 -->
		<div class="recruit">
			<!-- 版心区域 -->
			<div class="center">
				<!-- 头部区域 -->
				<!-- 底部区域 -->
				<div class="bottom width-max">
					<div class="video-group">
						<div
							class="video-item"
							v-for="(item, index) in list.institueVideo"
							:key="index"
							@click="showVideo(item, index)"
						>
							<div class="title rows-1 title_word">
								{{ index + 1 }}、{{ item.videoTitle }}
							</div>
							<div class="rel m-t-10">
								<img :src="imgurl + item.videoPic" alt="" />
								<div class="mask fcc">
									<van-icon
										name="play-circle-o"
										size="42"
										color="#fff"
									/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		<!-- 视频弹窗播放 -->
		<!-- <van-dialog
			v-model="show"
			@closed="closeVideo"
			:showConfirmButton="false"
			closeOnClickOverlay
		>
			<div class="preview">
				<video
					class="video"
					id="my-video"
					autoplay
					x5-video-orientation="landscape"
					preload="auto"
					:src="videoUrl"
					controls="controls"
				></video>
			</div>
		</van-dialog> -->
	</div>
</template>

<script>

import { findContent } from "@/api/index"
import HeadPage from '@/components/public/HeadPage.vue'
export default {
	data() {
		return {
			list: {},
			HeadPagelist: [],
			show: false,
			videoUrl: ''
		}
	},

	//招聘标题查看详情
	mounted() {
		findContent({
			institueId: this.$route.query.id
		}).then((res) => {
			if (res.data.code == 200) {
				this.list = res.data.data
			}
		})
	},
	methods: {
		showVideo(item, index) {
			this.$router.push({
				name: 'LectureFive',
				query: {
					id: item.videoId,
					index: index + 1,
					title: this.list.institueTitle
				}
			})
		},
		closeVideo() {
			document.getElementById('my-video').pause()
			this.show = false
		},
	}
}
</script>

<style scoped>
/* 大盒子区域 */

.video-group {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 1.5%;
	box-sizing: border-box;
}
.video-group img {
	width: 100%;
	height: 2rem;
}
.video-item {
	width: 47%;
	margin: 1.5%;
	display: inline-block;
}
.video-item .mask {
	width: 100%;
	height: 2rem;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	top: 0;
}
.van-dialog {
	background: none;
	border-radius: 0;
}
.preview video {
	width: 100%;
	min-height: 2rem;
}
</style>